<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/iview.css"/>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.main{
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 20px;
				height: 500px;
				border: 1px solid #ccc;
				position: relative;
				padding-top: 50px;
			}
			.body{
				display: flex;
				align-items: flex-start;
				width: 100%;
				padding: 100px 0 100px 0;
			}
			.prizeType{
				display: flex;
				width: 100%;
				justify-content: space-evenly;
			}
			.prizeType .name{
				border: 1px solid #666;
				border-radius: 50%;
				padding: 5px 10px;
			}
			.prizeType .num{
				text-align: center;
				font-size: 16px;
			}
			.prizeType .name:hover{
				color: white;
				background-color: #666;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="main" id="vue">
			<div class="head">
				<div class="title">抽奖</div>
			</div>
			<div class="body">
				<div class="prizeType">
					<div class="item" v-for="(item,index) in prizeType" @click="prizeClick(prizeType[item].prizeGrade,prizeType[item].prizeNum)">
						<div class="name">{{prizeType[item].prizeGrade}}</div>
						<div class="num">数量：{{prizeType[item].prizeNum}}</div>
					</div>
				</div>
			</div>
		</div>
		<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
		<script type="text/javascript">
			document.write(returnCitySN["cip"]+','+returnCitySN["cname"] + "真实IP地址")
			let vue=new Vue({
				el:'#vue',
				data:{
					prizeType:[],
				},
				created() {
					Api.get_prize().then(res=>{
						this.prizeType=res.result
						console.log(res);
					})
					console.log(123)
				},
				methods:{
					prizeClick(type,num){
						console.log(type);
						location='system.html?name='+type+'&num='+num;
					}
				}
			})
		</script>
	</body>
</html>
